<template>
    <div class="conatianer water-container">
        <div class="header-2 header-3">
            <div class="icon location-icon">
                <img src="@/static/image/location-icon.png" />
            </div>
            <h4>{{ date_str_format.start }}至{{ date_str_format.end }}</h4>
            <div class="icon clock-icon">
                <img src="@/static/image/clock-icon-2.png" @click="popup_show = true" />
            </div>
        </div>
        <h4 class="title-a">锄头地水库工程基本信息</h4>

        <div>
            <table border="1" class="table-a">
                <tr v-for="(tr, tr_index) in tabelA">
                    <td v-for="(td, index) in tr">
                        {{ td }}
                    </td>
                </tr>
            </table>
        </div>
        <div>
            <h4 class="title-a">水位过程线</h4>
            <div class="g-box-conter">
                <div class="g-box">
                    <graph-d></graph-d>
                </div>
            </div>

            <div class="table-box-1">
                <table>
                    <tr v-for="(tr, index) in tabelB">
                        <td v-for="(td, index2) in tr">{{ td }}</td>
                    </tr>
                </table>
            </div>
        </div>

        <div>
            <h4>库容曲线</h4>
            <graph-e></graph-e>
        </div>

        <div>
            <h4>雨量柱状图</h4>
            <graph-f></graph-f>
        </div>

        <div>
            <div class="title-row-group">
                <span>天气预报</span>
                <span>长塘水库</span>
            </div>
            <div>
                <p class="p-11">2小时会不会下雨?</p>
                <p class="p-22">未来两小时不会下雨，放心出门吧</p>
            </div>
            <graph-g></graph-g>
        </div>
        

        <div>

            <h3>图片视频监控区域</h3>
            <h3>前端使用swiper</h3>
        </div>

        <van-popup v-model="popup_show" position="bottom" :style="{ 'height': popupHeight }">
            <div class="date-popup-box" v-if="!(dateS.start || dateS.end)">
                <div class="date-row">开始时间:<div class="date-box" @click="dateS.start = true">{{ date_str_format2.start }}
                    </div>
                </div>
                <div class="date-row">结束时间:<div class="date-box" @click="dateS.end = true">{{ date_str_format2.end }}</div>
                </div>
            </div>
            <div class="date-picker" v-if="dateS.start || dateS.end">
                <h3 class="date-select-title">{{ dateS.start ? '开始' : '结束' }}</h3>
                <div class="datetime-picker">
                    <div class="date-text-row">
                        <span>年</span>
                        <span>月</span>
                        <span>日</span>
                        <span>时</span>
                    </div>
                    <div class="datetime-picker-a">
                        <van-datetime-picker :show-toolbar="false" v-model="from.start" type="datehour" title="选择年月日小时"
                            :min-date="date.minDate" :max-date="date.maxDate">
                        </van-datetime-picker>
                    </div>
                </div>
                <div class="btn-row">
                    <van-button type="info" @click="verify_date()">确认</van-button>
                    <van-button type="default" @click="cancel_date()">取消</van-button>
                </div>
            </div>
            <div class="sbumit-row-2"  v-else>
                <van-button type="info">确认</van-button>
                <van-button type="default">取消</van-button>
            </div>
        </van-popup>
    </div>
</template>

<script>
import { tabelA, tabelB } from './tableData2'
import GraphD from './echart-d/graph.vue'
import GraphE from './echart-e/graph.vue'
import GraphF from './echart-f/graph.vue'
import GraphG from './echart-g/graph.vue'
import DateSelect from './date-select.vue';
function format_date(dateObj) {
    return dateObj.getFullYear() + "年" + (dateObj.getMonth() + 1) + "月" + dateObj.getDate() + "日" + dateObj.getHours() + "时" + dateObj.getMinutes() + "分";
}
export default {
    components: {
        GraphD, GraphE,GraphF,DateSelect,GraphG
    },
    data() {
        var now_date = new Date();
        var pass_date = new Date();
        pass_date.setDate(now_date.getDate() - 5);
        var [date, from] = [{ "start": pass_date, "end": now_date }, { "start": pass_date, "end": now_date }];
        date['maxDate'] = now_date;
        date['minDate'] = pass_date;
        date['minDate'].setDate(pass_date.getDate() - 100)
        return {
            tabelA, tabelB, popup_show: false,
            date,
            from,
            dateS: { "start": false, "end": false }  //日期选中弹出状态
        }
    },
    watch:{
        date(new_val,old_val){
        
        }
    },
    computed: {
        date_str_format() {
            var start = format_date(this.from.start);
            var end = format_date(this.from.end);
            return {
                start, end
            }
        },
        date_str_format2() {
            var start = format_date(this.date.start);
            var end = format_date(this.date.end);
            return {
                start, end
            }
        },
        //弹窗高度切换
        popupHeight(){
            return (this.dateS.start||this.dateS.end)?'60%':'40%'
        }
    },
    methods: {
        cancel_date() {
            this.dateS.end = false;
            this.dateS.start = false;
        },
        verify_date() {
            this.dateS.start = true;
            this.dateS.end = false;
        }
    }
}
</script>

<style scoped>
@import url("./water-detail.css");
@import url("./water-detail-2.css");
</style>